<template>
  <div id="task">
    <group class="task_box">
      <div class="task_title">
        <h3>邀请玩家有礼</h3>
        <router-link class="taskRecord" to="taskRecord">领奖记录</router-link>
      </div>
      <ul class="task">
        <li class="tasklist" v-for="noTimeTask in noTimeTaskList" :key="noTimeTask.id">
          <popover v-if="noTimeTask.locked" placement="bottom" class="task_popover">
            <div slot="content" class="popover-demo-content">完成前置任务后开启</div>
            <div class="imgbox">
              <img :src="noTimeTask.image">
              <img class="taskSign" src="../../../images/lock_icon.png" alt="">
            </div>
          </popover>
          <div v-else class="imgbox" @click="getTaskDetails(noTimeTask.type_id,noTimeTask.task_id,noTimeTask.id,noTimeTask.reward_status)">
            <img :src="noTimeTask.image">
            <img v-if="noTimeTask.reward_status==1" class="taskSign" src="../../../images/fulfill_icon.png" alt="">
          </div>
          <p class="omit">{{noTimeTask.task_desc}}</p>
        </li>
      </ul>
    </group>
    <group class="timeTask_box" v-for="timeTask in timeTaskList" :key="timeTask.id">
      <div class="task_title">
        <h3>{{timeTask.title}}</h3>
        <p v-if="timeTask.status" class="red">开启中...</p>
        <p v-else>未开启</p>
      </div>
      <div class="timeTask">
        <!-- <h3 class="taskWait">请稍等</h3> -->
        <div class="taskSon_box">
          <div class="taskSon">
            <div class="taskSon_hd">
              <div class="imgbox">
                <img :src="timeTask.image">
              </div>
              <p class="omit">
                <span class="red">{{timeTask.reward_goal}}</span>张房卡</p>
            </div>
            <div class="taskSon_bd">
              <h3>{{timeTask.reward_desc}}</h3>
              <p>{{timeTask.task_desc}}</p>
              <div class="progress_box">
                <x-progress :percent="parseInt(timeTask.schedule)" :show-cancel="false" class="progress"></x-progress>
                <span>{{timeTask.schedule}}</span>
              </div>
              <me-clocker class="clocker" :start-time='timeTask.start_time' :end-time='timeTask.end_time' msg="任务已结束"></me-clocker>
            </div>
          </div>
          <button v-if="parseInt(timeTask.schedule)==100 && timeTask.reward_status == 0" class="taskbtn" @click="getPrize(timeTask.task_id,timeTask.type_id)">领奖</button>
          <button v-else-if="timeTask.reward_status == 1" class="taskbtn">已领取</button>
          <button v-else class="taskbtn">继续努力</button>
        </div>
      </div>
    </group>
    <modal-box ref="modal"></modal-box>
  </div>
</template>

<script>
import { Group, XProgress, Popover, Alert } from "vux";
import modalBox from "../../../components/common/modalBox";
import meClocker from "../../../components/common/meClocker";
export default {
  data() {
    return {
      noTimeTaskList: [], //不限时任务列表
      timeTaskList: [] //不限时任务列表
    };
  },
  created() {
    this.getNoTimeTask();
    this.getTimeTask();
  },
  components: {
    modalBox,
    Group,
    XProgress,
    meClocker,
    Popover,
    Alert
  },
  methods: {
    getNoTimeTask() {
      this.apiService.Task.nontimedtasklist().then(res => {
        this.noTimeTaskList = res.data.nontimedtasklist;
      });
    },
    getTimeTask() {
      this.apiService.Task.timedtasklist().then(res => {
        this.timeTaskList = res.data.timedtasklist;
      });
    },
    getTaskDetails(typeid, taskid, configid, reward_status) {
      //领奖成功后不进入详情页
      if (reward_status == 1) return false;
      this.$router.push(
        `taskDetails?typeid=${typeid}&taskid=${taskid}&configid=${configid}`
      );
    },
    getPrize(taskid, typeid) {
      this.apiService.Task.getlimitedtaskreward({
        taskid: taskid,
        type: typeid
      }).then(res => {
        this.$vux.alert.show({
          title: this.COMPANY_GAME_NAME,
          content: `恭喜你成功领取房卡${res.data.reward_number}张`,
          hideOnBlur: true
        });
        this.getTimeTask();
      });
    }
  }
};
</script>
<style scoped>
#task {
  height: 100%;
}
.red {
  color: rgb(247, 93, 93);
}
.task_title {
  padding: 0.25rem 0.2rem;
  overflow: hidden;
  position: relative;
}
.task_title h3,
.task_title p,
.taskRecord {
  font-size: 0.3rem;
}
.task_title h3 {
  float: left;
}
.task_title p,
.taskRecord {
  text-align: right;
  float: right;
}
.taskRecord {
  color: rgb(0, 133, 231);
  position: relative;
  padding-right: 0.36rem;
}
.taskRecord:after {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: rgb(0, 133, 231);
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 0.16rem;
}
.task_title::after {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  color: #d9d9d9;
  bottom: 0;
  border-bottom: 1px solid #d9d9d9;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
.task,
.taskSon {
  padding: 2.5% 2.5% 4.5% 2.5%;
  overflow: hidden;
  position: relative;
}
.taskWait {
  font-size: 0.35rem;
  padding: 2.5%;
  text-align: center;
  color: rgb(0, 133, 231);
}
.tasklist {
  width: 20%;
  float: left;
  height: 20%;
  margin: 2.5%;
  text-align: center;
  /* position: relative; */
}
.tasklist .imgbox,
.taskSon_hd .imgbox {
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 6px;
  margin: 0 auto;
  background: #ccc;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tasklist .imgbox img,
.taskSon_hd .imgbox img {
  max-width: 80%;
  max-height: 80%;
}
.tasklist .imgbox .taskSign {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tasklist p,
.taskSon_hd p {
  font-size: 0.2rem;
  margin-top: 0.1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*限时任务*/
.taskSon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.taskSon .taskSon_hd,
.taskSon .taskSon_bd {
  float: left;
  text-align: center;
}
.taskSon .taskSon_hd {
  width: 35%;
}
.taskSon .taskSon_bd {
  width: 65%;
}
.taskSon .taskSon_bd h3 {
  font-size: 0.35rem;
  padding: 0.15rem;
}
.taskSon .taskSon_bd p {
  font-size: 0.25rem;
  padding: 0.15rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.taskSon .clocker,
.taskSon .progress_box {
  padding: 0.2rem;
  overflow: hidden;
}
.taskSon .clocker {
  font-size: 0.3rem;
}
.progress_box {
  display: flex;
}
.progress_box .progress {
  float: left;
  width: 75%;
}
.progress_box span {
  font-size: 0.3rem;
  margin-left: 0.2rem;
  float: left;
}
.taskbtn {
  width: 100%;
  line-height: 0.8rem;
  font-size: 0.3rem;
  color: rgb(0, 133, 231);
  background-color: #f5f5f5;
}
</style>
<style>
#task .task_box .weui-cells {
  margin: 0;
}
#task .progress .weui-progress__bar,
#task .weui-progress__inner-bar {
  height: 0.3rem;
  border-radius: 0.3rem;
}
.vux-popover {
  width: 20%;
  font-size: 0.2rem;
  padding: 0.1rem;
  border-radius: 0.1rem;
  text-align: justify;
}
</style>

